<template>
    <view class="bg-[#f8f8f8] min-h-screen">
        <view class="text-[36rpx] pt-[20rpx] flex justify-around">
            <text @click="creent = 0"
                :class="creent == 0 ? 'font-bold text-[#FD755D] border-b-[5rpx] border-[#FD755D]' : ''"
                class="mr-[36rpx] ">线下活动</text>
            <text @click="creent = 1"
                :class="creent == 1 ? 'font-bold text-[#FD755D] border-b-[5rpx] border-[#FD755D]' : ''"
                class="text-[#434141]">分享体验</text>

        </view>
        <view v-if="creent == 0"
            class=" bg-white h-[126rpx] pl-[44rpx] pr-[20rpx] shadow flex items-center justify-between mt-2 relative">
            <text class=" font-bold text-[34rpx]">中秋游园活动</text>
            <view class=" text-white py-[10rpx] w-[143rpx] text-center bg-[#FD755D] rounded  text-[32rpx]">即将开始</view>
            <image src="https://tcimg.yangjc.com/upload/images/2024-12-31/67734e24219c9.png"
                class=" absolute top-0 left-0 w-[100rpx] h-[100rpx]"></image>
        </view>
        <view v-else>
            <view class=" bg-white mt-[20rpx] px-[50rpx] py-[20rpx] shadow">
                <view class="flex items-center">
                    <text class="text-[#FD755D] mr-[220rpx]">￥1235</text>
                    <text>学分10</text>
                </view>
                <view class="mt-[20rpx]">
                    <text>商品名称：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>描述：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>时间：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>店铺名称：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>店铺地址：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx] flex justify-center">
                    <view
                        class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                        确认</view>
                </view>
            </view>
            <view class="text-center my-2 text-[38rpx] font-medium">已完成列表</view>
            <view class=" bg-white px-[50rpx] py-[20rpx] shadow">
                <view class="flex items-center">
                    <text class="text-[#FD755D] mr-[220rpx]">￥1235</text>
                    <text>学分10</text>
                </view>
                <view class="mt-[20rpx]">
                    <text>商品名称：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>描述：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>时间：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>店铺名称：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>店铺地址：</text>
                    <text></text>
                </view>
               
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue';
const creent = ref(0);
</script>